@charset "utf-8";
/* CSS Document */
body{ padding: 3px 0px 0px 0px; margin: 0; font:normal 12px "Arial", Arial, Helvetica, sans-serif; line-height: 1.5em; background-color: #b2d0ac;}
a{ text-decoration: none;}
a:hover{ cursor: pointer;}
p { padding: 0; margin: 0;}
h3{ padding:0; font-size: 14px; color: #385915; margin: 5px 0px 3px 0px;}

/*============================= Message ===============================*/
.error { color: red !important;}
.message { padding: 5px; margin: 5px; display: none;}
.success { background-color: #385915; color: #fff;}
.loading { width: 100%; text-align: center; background: url("../img/loading-green.gif") top center no-repeat; height: 35px; display: none;}


#wrapper{ width: 990px; margin: auto;}
.line { width: 99%; height: 2px; background-color: #e6e6e6;}
.cat-title { font: bold 14px "Arial"; height: 30px; padding: 14px 10px 0 20px; text-transform: uppercase; float: left; text-shadow: #c0c0c0 1px 1px 1px;}
.white, .white a { color: #fff;}
.green, .green a { color: #385915;}
/*==================== Header =============================*/
#header { width: 100%; height: 125px; float: left;}
#header .logo { height: 125px; width: 350px; float: left;}

/*==================== Main ===============================*/
#main { width: 980px; background-color: #f2f2f2; padding: 5px; float: left; -moz-border-radius: 7px; -webkit-border-radius: 7px;}
/*==================== Top menu ===========================*/
#topMenu { width: 100%; height: 42px; background:url('../img/boxes_menu.gif') 0px 100% repeat-x transparent; float: left;}
#topMenu ul { list-style: none; padding: 0; margin: 0; float: left;}
#topMenu ul li { display: inline; float: left; padding: 12px 15px 12px 15px; border-right: 1px solid #6e6e6e;}
#topMenu ul li:hover, #topMenu ul li.active { background:url('../img/menu_bg_hover.png') 0px 100% repeat-x transparent;}
#topMenu ul li a { color: #fff; font-weight: bold; text-transform: uppercase; font-size: 14px;}

#topMenu .search-box { float: right; padding: 8px 5px 6px 5px;}
#topMenu .search-box .search-textbox { border: 1px solid #99B636; float: left;}
#topMenu .search-box .button-search-header { margin-left: 5px; float: left;}
#topMenu .lang-box { float: right; padding: 10px 5px 6px 5px;}
#topMenu .lang-box .img-lang { height: 19px; cursor: pointer;}
/*==================== Home slide =========================*/
#homeSlide { width: 978px; height: 340px; float: left; position: relative; border: 1px solid #e6e6e6;}
/*==================== Main content =======================*/
#mainContent { width: 100%; height: auto; margin: 5px 0px 0px 0px; float: left;}
	.content { float: left; width: 725px; background-color: #fff;}
	.content .content_Title { background:url(../img/center_col_title_green.png) no-repeat top center; height: 42px; width: 100%; float: left;}
	.content .content_Title.special { background:url(../img/center_col_title_special.png) no-repeat top center; height: 42px; width: 100%; float: left;}
	.content .content_Title .breadcrumb { font-size: 14px; padding: 12px 3px 10px 5px;}
	.content .content_Title .breadcrumb .separator { width: 5px; background: url("../img/separator.gif") top center no-repeat;}
	.content .content_Title .breadcrumb ul { padding: 0; margin: 0; list-style: none;}
	.content .content_Title .breadcrumb ul li { display: inline;}
	.content .content_Title .breadcrumb ul .current { font-weight: bold;}
		.content-container { border: 1px solid #e6e6e6; float: left; width: 718px; border-top: none; padding-left: 5px;}
		.content-container table { margin-left: 10px;}
		.content-container .product, .news { width: 350px; float: left; margin: 5px 7px 5px 2px;}
		.content-container .product .img-product { width: 140px; height: 140px; float: left; border: 1px solid #e6e6e6; padding: 2px; margin-right: 3px;}
							.img-news { width: 140px; float: left; border: 1px solid #e6e6e6; padding: 2px; margin-right: 3px;}
		.content-container .product .img-product:hover { border: 1px solid #c0c0c0; cursor: pointer;}
		.content-container .product .product-name a, .news-title a { font: normal 14px "Arial"; color: #80ac11 !important; text-transform: uppercase; font-weight: bold; margin-bottom: 5px;}
		.content-container .product .product-name a:hover, .news-title a:hover { color: #385915 !important;}
		.content-container .product .product-description, .news-description { margin-bottom: 3px; text-align: justify;}
		.content-container .product .product-price { font-weight: bold; color: #8d8d8d; font-size: 12px; text-transform: uppercase; text-align: right;}
		/*============ Detail product =====================*/
		.content-container .detail-product-image { width: 400px; float: left; padding: 5px;}
		.content-container .detail-product-image #main-img{ width: 400px;}
		.content-container .detail-product-image .list-img{ width: 400px;}
		.content-container .detail-product-image .list-img ul li img { border: 1px solid #e6e6e6;}
		.content-container .detail-product-image .list-img ul li img:hover{ border: 1px solid #c0c0c0;}
		.content-container .detail-product-image ul{ list-style: none; padding: 0; margin: 5px 0px 0px 0px;}
		.content-container .detail-product-image ul li{ display: inline; margin-left: 0px;}
		.content-container .detail-product-image ul li.first{ margin-left: 0px;}
		.content-container .detail-product-image .list-img .sub-img{ width: 75px;}
		.content-container .common-infor-product { width: 300px; float: right; padding: 15px 0px 0px 0px;}
		.content-container .common-infor-product table .label-infor { text-align: right; font-weight: bold;}
		.content-container .detail-infor-product { float: left; width: 99%; padding: 5px;}
		/*============ Detail news ========================*/
		.content-container .detail-news-title { font-size: 16px; font-weight: bold; margin: 10px 5px 5px 5px;}
		.content-container .detail-news-headline { font-size: 13px; font-weight: bold; font-style: italic; color: #5f5f5f; margin: 2px 0px 5px 5px}
		.content-container .detail-news-content { padding: 5px;}
	/*================ Right sidebar ======================*/
	#rightSideBar { float: right; width: 250px; height: auto; margin: 0px 0px 5px 5px;}
		/*============ Right sidebar box ==================*/
		.box { margin-bottom: 10px;}
		.box .box-title { background: url(../img/categories_block_title.png) no-repeat top left; width: 100%; height: 42px;}
		.box.special .box-title { background: url(../img/specials_block_title.png) no-repeat top left;}
		.box .box-content { border: 1px solid #c0c0c0; padding: 3px;}
		.box .box-content ul { list-style: none; padding: 0; margin: 0;}
		.box .box-content ul li { display: block;}
		.box .box-content ul li a { color: #50762E !important; width: 240px; display: block; border-bottom: 1px solid #fff;  padding: 5px 0px 5px 5px;}
		.box .box-content ul li ul li a { width: 230px; display: block; border-bottom: 1px solid #fff;  padding: 5px 0px 5px 15px;}
		.box .box-content ul li a:hover { background-color: #d2e5d0;}
		.box .box-content ul li a.active { font-weight: bold;}
		.onlineSupport .supportName { line-height: 20px;}
		.onlineSupport li { text-align: left; display: inline-block !important; padding: 3px;}
		.onlineSupport li a { width: auto !important; display: inline !important; float: left; padding: 0px 5px 0px 5px !important;}
		.onlineSupport li a:hover { background: none !important;}
#bottomImgScroll { float: left; width: 725px; margin: 5px 0px 0px 0px;}
/*==================== Foooter ============================*/
#footer-wrapper { background-color: #e5eee4; height: 70px; margin-top: 5px;}
#footer-wrapper .footer{ width: 990px; margin: auto; padding: 3px 0px 3px 0px;}

/*==================== Adverting ==========================*/
.adverting { }
.adverting.header { float: right; width: 600px; text-align: right; padding-top: 10px;}

/*==================== Contact ============================*/
.label-contact { font-weight: bold; text-align: right;}
#frmContact .command-btn{ text-align: center;}
/*==================== Form Element =======================*/
input { border: 1px solid #c0c0c0;}
input.error { border: 1px solid red;}
input[type="image"] { border: none !important;}
input.large { width: 250px;}
input.larger { width: 350px;}
input[type="button"],input[type="submit"],input[type="reset"] { 
	background: url(../img/btn_button.png) repeat-x top left;
	border: none; color: #fff; padding: 3px 7px 3px 7px;
	font-weight: bold;
	cursor: pointer;
}
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { background: #609207;}



/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 630px;
    height:120px;
	float: left;
	margin: 5px 0px 5px 0px;
    /* custom decorations */
    border:1px solid #ccc;
    background:url(../img/h300.png) repeat-x;
}

/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:680px;
}

/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 5px 20px 13px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}

a.browse {
    background:url(../img/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:45px 10px;
    cursor:pointer;
    font-size:1px;
}

/* right */
a.right                 { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover       { background-position:-30px -30px; }
a.right:active  { background-position:-60px -30px; } 


/* left */
a.left              { margin-left: 0px; } 
a.left:hover        { background-position:-30px 0; }
a.left:active   { background-position:-60px 0; }

/* up and down */
a.up, a.down        { 
    background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover          { background-position:-30px 0; }
a.up:active         { background-position:-60px 0; }

/* down */
a.down              { background-position: 0 -30px; }
a.down:hover        { background-position:-30px -30px; }
a.down:active   { background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
    /* visibility:hidden !important;  */
}